<template>
  <!-- 广告系列详情的数据概览-->
  <div style="margin-bottom: 48px;">
    <!-- 预警监控抽屉 -->
  <el-drawer
    title="预警监控"
    :visible.sync="isDrawerShow"
    :before-close="handleClose">
    <div class="div_border"></div>
    <warning :isDrawerShow="isDrawerShow" style="margin-top: -40px;"></warning>
    </el-drawer>
    <template>
      <el-card style="margin-bottom: 20px;" shadow="never">
        <series-did-header ref="seriesHeader" @changeStatus="changeStatus" />
      </el-card>
      <!-- 核心指标开始 -->
      <el-card
        v-loading="targetLoading"
        shadow="never"
        class="box-card"
        style="margin-bottom: 24px;"
        element-loading-text="数据加载中,请稍候"
      >
        <div class="zb_div">
          <cell-header title="核心指标" style="padding-bottom: 34px;" />
          <!-- <em class="jk_text" @click="isDrawerShow = true">预警监控</em> -->
        </div>

        <div class="data">
          <coreTarget :target-data="targetList" :time-arr="[queryEchart.startTime,queryEchart.endTime]" :adchannel-type="campaignInfo.adchannelType" />
        </div>
      </el-card>
      <!-- 核心指标结束 -->
      <!-- 趋势对比开始 -->
      <el-card class="trend-card" shadow="never">
        <div class="trend">
          <cell-header title="趋势对比">
          </cell-header>
          <div>
            <el-tabs v-model="tabActiveName">
              <!-- 日期开始 -->
              <el-tab-pane v-loading="dateLoading" element-loading-text="数据加载中,请稍候" label="日期" name="date">
                <div style="width: 100%;">
                  <date-echart v-if="tabActiveName==='date'" :date-info="ehcartsList" :adchannel-type="campaignInfo.adchannelType">
                    <div slot="right">
                      <el-radio-group v-model="dateAccuracy" size="small" @change="getDateData">
                        <el-radio-button label="DAILY">每天</el-radio-button>
                        <el-radio-button label="HOURLY" :disabled="$getDiffDay(queryEchart.startTime,queryEchart.endTime)>31">每小时</el-radio-button>
                      </el-radio-group>
                    </div>
                  </date-echart>
                </div>

              </el-tab-pane>
              <!-- 日期结束 -->
              <!-- "国家及地区开始 -->
              <el-tab-pane v-loading="countryLoaing" label="国家及地区" name="region" element-loading-text="数据加载中,请稍候">
                <div style="width: 100%;">
                  <selectEchart
                    v-if="tabActiveName==='region'"
                    :echart-data="countryEchartList"
                    :val-list="countryVal"
                    :adchannel-type="campaignInfo.adchannelType"
                  >
                    <div slot="left" class="left-box flex">
                      <div class="left-box-rt">
                        <template v-for="(item,index) in cityGroup">
                          <el-select
                            v-if="index<5"
                            :key="item.short"
                            v-model="checkedCountry[index]"
                            size="small"
                            placeholder="请选择国家/地区"
                            @change="findReportCampaignTotalBySearch"
                          >
                            <el-option v-for="z in cityGroup" :key="z.short" :label="z.name" :value="z.short" :class="'select'+(index+1)+'-op'">

                              <p>
                                <i class="el-icon-check"></i>
                                <span>{{ z.name }}</span>
                              </p>
                            </el-option>
                          </el-select>
                        </template>
                      </div>
                    </div>
                    <div slot="right">
                      <el-radio-group v-model="countryAccuracy" size="small" @change="findReportCampaignTotalBySearch">
                        <el-radio-button label="DAILY">每天</el-radio-button>
                        <el-radio-button label="HOURLY" :disabled="$getDiffDay(queryEchart.startTime,queryEchart.endTime)>31">每小时</el-radio-button>
                      </el-radio-group>
                    </div>
                  </selectEchart>

                </div>
                <!-- "国家及地区结束 -->
              </el-tab-pane>

              <!-- 广告组趋势对比开始 -->
              <el-tab-pane v-loading="groupLoaing" label="广告组" name="cate" element-loading-text="数据加载中,请稍候">
                <div style="width: 100%;">
                  <selectEchart
                    v-if="tabActiveName==='cate'&&allGroupList.length"
                    :echart-data="adGroupEchartList"
                    :val-list="groupVal"
                    :adchannel-type="campaignInfo.adchannelType"
                  >
                    <div slot="left" class="left-box flex">
                      <div class="left-box-rt">
                        <template v-for="(item,index) in allGroupList">
                          <el-select
                            v-if="index<5"
                            :key="index"
                            v-model="checkedAdGroup[index]"
                            size="small"
                            placeholder="请选择广告组"
                            @change="findReportAdGroupTotalBySearch"
                          >
                            <el-option
                              v-for="element in allGroupList"
                              :key="element.adGroupId"
                              :label="element.name"
                              :value="element.adGroupId"
                              :class="'select'+(index+1)+'-op'"
                            >

                              <p>
                                <i class="el-icon-check"></i>
                                <span>{{ element.name }}</span>
                              </p>
                            </el-option>
                          </el-select>
                        </template>
                      </div>
                    </div>
                    <div slot="right">
                      <el-radio-group v-model="groupAccuracy" size="small" @change="findReportAdGroupTotalBySearch">
                        <el-radio-button label="DAILY">每天</el-radio-button>
                        <el-radio-button label="HOURLY" :disabled="$getDiffDay(queryEchart.startTime,queryEchart.endTime)>31">每小时</el-radio-button>
                      </el-radio-group>
                    </div>
                  </selectEchart>
                  <div v-else style="color: #909399;font-size: 14px;height: 236px;line-height: 236px;text-align: center;">暂无数据</div>
                </div>
              </el-tab-pane>
              <!-- 广告组趋势对比结束 -->
            </el-tabs>

          </div>
        </div>
      </el-card>
      <!-- 趋势对比结束 -->

      <!--广告组与 关键词等开始 -->
      <div class="tabs">
        <div class="tabs-header flex">
          <div :class="activeName==='adGroup'?'tabs-item pointer active':'tabs-item pointer'" @click="activeName='adGroup'">
            <span>广告组</span>
          </div>
          <div :class="activeName!=='adGroup'?'tabs-item pointer active':'tabs-item pointer'" @click="activeName='keyWord'">
            <span>关键词</span>
          </div>
        </div>

        <div class="tabs-main">

          <table-box
            v-if="activeName==='adGroup'"
            :start-time="queryEchart.startTime"
            :end-time="queryEchart.endTime"
            :adchannel-type="campaignInfo.adchannelType"
            :select-btn-show="selectBtnShow"
            :campaign-info="campaignInfo"
          ></table-box>

          <el-tabs v-if="activeName==='keyWord'" v-model="wordActiveName" class="word-content">
            <el-tab-pane label="关键词" name="keyWord">
              <key-words ref="keyWordBox" :time-arr="[queryEchart.startTime,queryEchart.endTime]"></key-words>
            </el-tab-pane>
            <el-tab-pane label="搜索词" name="searchWord">
              <searchWords :time-arr="[queryEchart.startTime,queryEchart.endTime]"></searchWords>
            </el-tab-pane>
            <el-tab-pane label="屏蔽词" name="balckWord">
              <negative-word ref="noKeyWordBox" :time-arr="[queryEchart.startTime,queryEchart.endTime]"></negative-word>
            </el-tab-pane>

          </el-tabs>
        </div>

        <!-- 设置显示字段 -->

      </div>
    </template>

    <!-- 支付成功或者失败 -->
    <template>
      <el-dialog :title="$route.query.state*1!==1?'支付失败':'支付成功'" :visible.sync="orderInfoShow" width="650px" @close="closeOrderInfo">
        <payOrderInfo :order-info="orderInfo" />
        <span slot="footer" class="dialog-footer">
          <el-button size="small" type="success" @click="closeOrderInfo">完 成</el-button>
        </span>
      </el-dialog>
    </template>

  </div>
</template>

<script>
import coreTarget from '../components/coreTarget.vue'
import dateEchart from '@/components/charts/dateEchart.vue'
import selectEchart from '@/components/charts/selectEchart.vue'
import audiencesEchart from '@/components/charts/audiencesEchart.vue'
import cellHeader from '@/components/cell-header.vue'
import payOrderInfo from '@/components/payOrderInfo/index.vue'
import seriesDidHeader from '../components/bid-header/series-bid-header.vue'
import tableBox from './components/table.vue'
import warning from '@/views/tool/warning/index.vue'
// 关键词
import keyWords from '../components/word-box/keyWords.vue'
// 搜索词
import searchWords from '../components/word-box/searchWords.vue'
// 屏蔽词
import negativeWord from '../components/word-box/negativeWord.vue'

import {
  // findCountry,
  findCountryByQuery
} from '@/utils/index.js'
import {
  findReportAdGroupTotal, // 图表数据
  findReportCampaignTotalAudienceType, // 根据受众查询图表
  findReportAdGroupTotalBySearch, // 根据广告组查询图表
  findAdgroupsList // 查询所有广告组
} from '@/api/overView.js'

import {
  findCampaignOne,
  returnOrderInfo
} from '@/api/create.js'

export default {
  components: {
    tableBox,
    payOrderInfo,
    coreTarget,
    dateEchart,
    selectEchart,
    cellHeader,
    seriesDidHeader,
    keyWords,
    searchWords,
    negativeWord,
    warning

  },
  data() {
    return {
      isDrawerShow: false,
      dateLoading: true,
      groupLoaing: true,
      activeName: 'adGroup',
      wordActiveName: 'keyWord',
      campaignInfo: {
        adchannelType: ''
      }, // 广告系列的详细数据
      orderInfoShow: false, // 是否显示订单支付信息
      orderInfo: {}, // 订单支付信息
      /* 核心指标*/
      targetLoading: true,
      targetList: {
        old: {},
        new: {},
        yesterday: {},
        dayBeforeYesterday: {}
      }, // 核心指标数据

      /* 图表*/

      ehcartsList: [], // 趋势对比数据
      dateAccuracy: 'DAILY',
      tabActiveName: 'date', //
      /* 广告组 */
      tableLoading: false,
      countryLoaing: false,
      tableLoadTxt: '数据加载中,请稍候',
      allGroupList: [], // 所有的广告组数据
      checkedAdGroup: [], // 选中的adgroup数据
      checkedAdGroupType: 'localSpendAmount', // 选中的展示类型
      groupAccuracy: 'DAILY', // 请求图表的时间粒度
      adGroupEchartList: [],
      /* 国家*/
      cityGroup: [], // 可供选择的国家
      checkedCountry: [], // 选中的国家
      countryAccuracy: 'DAILY', // 请求图表的时间粒度
      countryEchartList: [],
      detailShow: true,
      // 图表的查询参数
      // 图表的查询参数
      queryEchart: {
        currencyType: this.$route.query.currencyType || this.$store.state.user.unit,
        audienceType: 'countryOrRegion', // 选择受众类型
        typeValue: '', // 受众值
        campaignId: this.$route.query.campaignId, // 如果不是单个campaign就不填
        country: '',
        countrySX: this.$store.state.user.timeZone, // 时区
        timeZone: this.$store.getters.timeZoneTime, // 时区比UTC时间少几个小时
        endTime: '', // 开始时间
        startTime: '', // 结束时间
        name: '', // 查询时的名称  模糊查询
        status: '', // 状态
        userId: this.$store.state.user.userInfo.userId,
        adChannelType: '', // 投放位置
        orgId: this.$route.query.orgId || '', // 如果是自助投放为空
        uuid: this.$route.query.uuid || '',
        aId: this.$route.query.aId || this.$route.query.aid || '',
        type: 'DAILY', // 每天：'DAILY' 每小时'HOURLY'
        adGroupId: ''
      }
    }
  },
  computed: {
    // 结算币种
    unit() {
      const index = 1
      const index1 = index + 1
      return this.$store.state.user.unit
    },
    // 结算币种金额符号
    unitTxt() {
      const unit = this.$store.state.user.unit
      this.$forceUpdate()
      return unit === 'RMB' ? '￥' : '$'
    },

    // 选择的时区
    timeZone() {
      return this.$store.state.user.timeZone
    },
    // 选择的开始时间与结束时间
    timeObj() {
      return this.$store.state.overview.timeObj.overViewTime
    },
    // 选中的国家
    countryVal() {
      const list = this.checkedCountry
      const array = []
      if (list.length) {
        const arr = list.map(item => {
          const index = this.cityGroup.findIndex(v => {
            return item === v.short
          })
          return {
            ...this.cityGroup[index],
            key: this.cityGroup[index].short,
            selected: true
          }
        })
        return arr
      } else {
        return array
      }
    },

    // 选中的广告组
    groupVal() {
      if (this.checkedAdGroup.length) {
        const arr = this.checkedAdGroup.map(item => {
          const index = this.allGroupList.findIndex(v => {
            return item === v.adGroupId
          })
          return {
            ...this.allGroupList[index],
            key: this.allGroupList[index].adGroupId,
            selected: true
          }
        })
        return arr
      } else {
        return ''
      }
    },

    // 判断只读
    selectBtnShow() {
      if (this.$route.query.uuid && (this.$route.query.orgId || this.$route.query.orgid)) {
        const index = this.$store.state.overview.allAc.findIndex(item => {
          return item.uuid === this.$route.query.uuid
        })

        const i = this.$store.state.overview.allAc[index].org.findIndex(item => {
          return item.orgId === this.$route.query.orgId * 1 || item.orgId === this.$route.query.orgid * 1
        })

        if (this.$store.state.overview.allAc[index].roleName === 'invalid_client' || this.$store.state.overview.allAc[
          index].roleName === 'API Read Only') {
          return false
        }

        const orgRole = this.$store.state.overview.allAc[index].org[i].roleName
        return orgRole !== 'API Read Only' && orgRole !== 'invalid_client' && !this.$isReadOnly(this.$store.state.user
          .userInfo.roleName)
      } else {
        return !this.$isReadOnly(this.$store.state.user.userInfo.roleName)
      }
    }
  },
  watch: {
    // 监听时区变化
    timeZone: {
      deep: true,
      handler: function(newV, oldV) {
        this.queryEchart.countrySX = this.$store.state.user.timeZone // 时区
        this.queryEchart.timeZone = this.$store.getters.timeZoneTime
        this.findCampaignOne() // 获取单个广告系列的详细信息并查询受众国家的图表数据
        this.getTarGetData() // 获取核心指标数据
        this.getDateData() // 获取日期趋势对比数据
        this.findAdgroupsList() // 查询这个广告系列下的所有广告组  并查询广告组的图表数据
      }
    },
    // 监听日期选择变化
    timeObj: { // �����Ķ���
      deep: true,
      handler: function(newV, oldV) {
        this.pieckerChange(newV)
      }
    }

  },
  created() {
    if (this.$route.query.orderid && this.$route.query.time) {
      this.orderInfoShow = true
      this.getOrderInfo()
    }
    this.pieckerChange(this.timeObj)
  },

  methods: {
    // 删除广告组之后的方法
    handleDelAd() {
      this.$refs['seriesHeader'].findCampaignOne() //
      this.findAdgroupsList() // 查询这个广告系列下的所有广告组  并查询广告组的图表数据
      this.findCampaignOne() // 获取单个广告系列的详细信息并查询受众国家的图表数据
    },

    closeOrderInfo() {
      this.orderInfoShow = false
      const {
        campaignId,
        modelType,
        orgId,
        aId,
        uuid
      } = this.$route.query
      const query = {
        campaignId,
        modelType,
        orgId,
        uuid,
        aId
      }
      this.$router.replace({
        path: this.$route.path,
        query
      })
      this.$forceUpdate()
    },

    // 获取支付订单信息
    async getOrderInfo() {
      const obj = {
        order: this.$route.query.orderid
      }
      const res = await returnOrderInfo(obj)
      if (res.data.data && res.data.code === 20000) {
        this.orderInfo = res.data.data
      } else {
        this.$message.closeAll()
        this.$message.error(res.data.message || '获取支付订单失败，请稍候重试')
      }
    },

    // 时间变化
    pieckerChange(data) {
      this.queryEchart.startTime = data.startTime
      this.queryEchart.endTime = data.endTime
      if (!this.$route.query.campaignId && !this.$route.query.campaignid) return false

      if (this.$getDiffDay(this.queryEchart.endTime, this.queryEchart.startTime) > 31) {
        this.queryEchart.type = 'DAILY'
        this.countryAccuracy = 'DAILY'
      }
      this.findCampaignOne() // 获取单个广告系列的详细信息并查询受众国家的图表数据
      this.getTarGetData() // 获取核心指标数据
      this.getDateData() // 获取日期趋势对比数据
      this.findAdgroupsList() // 查询这个广告系列下的所有广告组  并查询广告组的图表数据
    },
    changeStatus() {
      this.findCampaignOne()
    },

    // 根据orgid、campaignId查询某个Campaign详情
    async findCampaignOne() {
      const obj = {
        orgId: this.$route.query.orgId || '', // 如果是自助投放为空
        uuid: this.$route.query.uuid || '',
        aId: this.$route.query.aId || this.$route.query.aid || '',
        campaignId: this.$route.query.campaignId,
        teamId: this.$store.state.team.teamId || '',
        campaignGroupId: this.$route.query.serialId || '',
        countrySX: this.$store.state.user.timeZone, // 时区
        timeZone: this.$store.getters.timeZoneTime,
        currencyType: this.unit
      }

      const allCa = this.$store.state.overview.allCa
      const index = allCa.findIndex(item => {
        return item.campaignId * 1 === obj.campaignId * 1
      })

      const countryArr = findCountryByQuery(allCa[index].countriesOrRegions, true)
      const strArr = countryArr.map(item => {
        return item.short
      })
      obj.country = strArr.join(',')
      // obj.currencyType = allCa[index].budgetCurrency

      const res = await findCampaignOne(obj)
      if (res.data.code === 20000) {
        this.campaignInfo = JSON.parse(JSON.stringify(res.data.data))

        // 循环出这个广告系列可以选择的国家
        if (this.campaignInfo.countriesOrRegions && this.campaignInfo.countriesOrRegions.length) {
          const arr = findCountryByQuery(this.campaignInfo.countriesOrRegions, true)
          arr.forEach((item, i) => {
            if (i < 5) {
              this.checkedCountry[i] = item.short
            } else {
              return false
            }
          })
          this.cityGroup = arr

          this.findReportCampaignTotalBySearch()
        }
      } else {
        this.$message.closeAll()
        this.$message.error(res.data.message || '导出数据失败，请稍后重试')
      }
    },

    // 根据受众获取图表数据--国家
    async findReportCampaignTotalBySearch() {
      if (!this.checkedCountry.length) return
      this.countryLoading = true
      this.countryLoadTxt = '数据加载中,请稍候'
      const str = this.checkedCountry.join(',')
      this.countryLoaing = true
      var obj = {
        ...this.queryEchart,
        typeValue: str,
        type: this.countryAccuracy,
        audienceType: 'countryOrRegion',
        teamId: this.$store.state.team.teamId || '',
        campaignGroupId: this.campaignInfo.campaignGroupId * 1 === 0 ? '' : this.campaignInfo.campaignGroupId,
        orgId: this.$route.query.orgId || '', // 如果是自助投放为空
        uuid: this.$route.query.uuid || '',
        aId: this.$route.query.aId || this.$route.query.aid || ''
      }
      const res = await findReportCampaignTotalAudienceType(obj)
      this.countryLoaing = false
      if (res.data.code && res.data.code === 20000) {
        this.countryEchartList = JSON.parse(JSON.stringify(res.data.data))
      } else {
        this.$message.closeAll()
        this.$message.error(res.data.message || '服务器错误，请稍后重试')
      }
    },

    // 查询所有广告组
    async findAdgroupsList() {
      this.tableLoading = true
      this.tableLoadTxt = '数据加载中,请稍候'
      const res = await findAdgroupsList({
        ...this.queryEchart,
        teamId: this.$store.state.team.teamId || '',
        campaignGroupId: this.$route.query.serialId || '',
        orgId: this.$route.query.orgId || '', // 如果是自助投放为空
        uuid: this.$route.query.uuid || '',
        aId: this.$route.query.aId || this.$route.query.aid || ''
      })
      this.tableLoading = false

      if (res.data.code && res.data.code === 20000) {
        this.allGroupList = res.data.data
        if (res.data.data.length) {
          this.allGroupList.forEach((item, index) => {
            if (index < 5) {
              this.checkedAdGroup[index] = item.adGroupId
            } else {
              return
            }
          })
          this.findReportAdGroupTotalBySearch() // 查询广告组信息
        }
      } else {
        this.$message.closeAll()
        this.$message.error(res.data.message || '服务器错误，请稍后重试')
      }
    },

    // 获取图表数据---广告组
    async findReportAdGroupTotalBySearch() {
      this.groupLoaing = true
      if (!this.checkedAdGroup.length) return
      const str = this.checkedAdGroup.join(',')
      var obj = {
        ...this.queryEchart,
        adGroupId: str,
        aId: this.$route.query.aId || this.$route.query.aid || '',
        type: this.groupAccuracy,
        teamId: this.$store.state.team.teamId || '',
        campaignGroupId: this.$route.query.serialId || ''
      }
      const res = await findReportAdGroupTotalBySearch(obj)
      if (res.data.code && res.data.code === 20000) {
        this.adGroupEchartList = JSON.parse(JSON.stringify(res.data.data))
      } else {
        this.$message.closeAll()
        this.$message.error(res.data.message || '服务器错误，请稍后重试')
      }
      this.groupLoaing = false
    },

    // 获取日期图表数据--获取核心指标数据的方法
    async findReportAdGroupTotal(typeStr) {
      const res = await findReportAdGroupTotal({
        ...this.queryEchart,
        aId: this.$route.query.aId || this.$route.query.aid || '',
        type: typeStr || 'DAILY',
        teamId: this.$store.state.team.teamId || '',
        campaignGroupId: this.$route.query.serialId || ''
      })

      if (res.data.code === 20000) {
        return res.data.data
      } else {
        this.$message.closeAll()
        this.$message.error(res.data.message || '服务器错误，请稍后重试')
      }
    },

    // 核心指标获取方法
    async getTarGetData() {
      this.targetLoading = true
      const res = await this.findReportAdGroupTotal('DAILY')
      this.targetLoading = false

      if (res.now && res.old) {
        this.targetList = JSON.parse(JSON.stringify(res))
      } else {
        this.$message.closeAll()
        this.$message.error(res.data.message || '服务器错误，请稍后重试')
      }
    },

    // 趋势对比图表数据获取方法 日期
    async getDateData() {
      this.dateLoading = true
      const that = this
      const res = await this.findReportAdGroupTotal(this.dateAccuracy)


      if (res.now && res.old) {
        this.ehcartsList = JSON.parse(JSON.stringify(res.result))
      } else {
        this.$message.closeAll()
        this.$message.error(res.data.message || '服务器错误，请稍后重试')
      }
           this.dateLoading = false
    }

  }
}
</script>

<style lang="scss" scoped="true">
  @import '../components/handle.scss';
  @import '~@/styles/variables.scss';
  div /deep/ .el-drawer__body{
  overflow: hidden !important;
  width: 1200px !important;
}
div /deep/.el-drawer__open .el-drawer.rtl {
    width: 1200px !important;
}
 .zb_div{
   display: flex;
   flex-direction: row;
   .jk_text{
     font-size: 14px;
     position: absolute;
     right: 0;
     margin-right: 50px;
     cursor: pointer;
   }
 }
  .data {
    padding-bottom: 24px;
  }

  .trend-card {
    margin-bottom: 24px;
  }

  .table-box {
    .series-table {
      margin-top: 24px;
    }

  }

  .left-box {

    .left-box-lt,
    .left-box-rt {
      display: flex;
      flex-wrap: nowrap;

      .el-select,
      .el-form-item__content,
      .el-input,
      .el-input__inner {
        max-width: 120px;

      }
    }

    .left-box-lt {
      margin-right: 40px;
    }

    .left-box-rt {
      .el-select {
        margin-right: 14px;
        ::v-deep .el-input:after{
           display: inline-block;
           content: '1';
           font-size: 0;
           position: absolute;
           top: 0;
           left: 0;
           height: 32px;
           width: 4px;

         }
      }

      .el-select::v-deep .el-input__inner {
        border-color: #E0E2E7;
        border-left-width: 4px;
      }

      .el-select:nth-of-type(1) ::v-deep .el-input::after {
        background-color: $chartColor1;
      }

      .el-select:nth-of-type(2) ::v-deep .el-input::after  {
        background-color: $chartColor2;
      }

      .el-select:nth-of-type(3) ::v-deep .el-input::after   {
        background-color: $chartColor3;
      }

      .el-select:nth-of-type(4) ::v-deep .el-input::after   {
        background-color: $chartColor4;
      }

      .el-select:nth-of-type(5) ::v-deep .el-input::after   {
        background-color: $chartColor5;
      }

    }

  }

  .tabs {
    background-color: #FFFFFF;

    .tabs-header {
      justify-content: flex-start;
      height: 40px;
      overflow: hidden;

      .tabs-item {
        line-height: 40px;
        width: 165px;
        text-align: left;
        text-indent: 24px;
        background:  #F3f3f3;
        transform: skewX(-45deg);

        span {
          display: inline-block;
          width: 165px;
          transform: skewX(45deg);
          font-weight: 500;
          font-family: "PingFangSC-Medium", PingFangSC, sans-serif !important;
          font-size: 16px;
        }

        &:hover,
        &:focus {
          color: $mainColor1;
        }

        &:first-of-type {
          margin-left: -20px;
          padding-left: 10px;
        }

        &:last-of-type {
          flex: 1;
          background: #f3f3f3;
          margin-right: -60px;
        }

        &.active {
          color: $mainColor1;
          background-color: #FFFFFF;
        }

      }

    }

  }

  .word-content {
    padding: 24px;
    padding-top: 11px;

    /deep/ .el-tabs__header {
      margin-bottom: 0;
    }

    /deep/ .el-tabs__content {
      padding-top: 24px;
    }
  }

  .el-select-dropdown__item {
    margin-right: 8px;
    margin-left: 8px;
    &.hover{
      background: transparent;
    }
    &:hover{
      background-color: #f7f7f9 !important;
    }
    p {
      font-size: 14px;

      i {
        font-weight: 600;
        font-size: 14px;
        margin-right: 8px;
        opacity: 0;
      }
    }

    &.is-disabled {
      color: $isDisabledTxtColor;
    }

    &.selected {
      background-color: #f7f7f9 !important;
      p {
        span {
          color: $bodyTxtColor !important;
          font-weight: 400;
        }
      }
    }

    &.select1-op.selected {
      i {
        color: $chartColor1;
        opacity: 1;
      }
    }

    &.select2-op.selected {
      i {
        color: $chartColor2;
        opacity: 1;
      }
    }

    &.select3-op.selected {
      i {
        color: $chartColor3;
        opacity: 1;
      }
    }

    &.select4-op.selected {
      i {
        color: $chartColor4;
        opacity: 1;
      }
    }

    &.select5-op.selected {
      i {
        color: $chartColor5;
        opacity: 1;
      }
    }
  }
</style>
